<template>
  <div class="home">
    <!-- 顶部轮播图 -->
    <swipe />
    <!-- 顶部轮播图 -->

    <div class="home-wrap">
      <!-- 中间浮动的盒子 -->
      <float-box
        :timeData="timeData"
        :timeDistance="timeDistance"
        @clickGetCar="getCarTime"
        @clickAlsoCar="AlsoCarTime"
        class="float-box"
        @clickAlsoAddress="addressShow = true"
        @clickGetAddress="addressShow = true"
        @clickNoDeposit="noDepositShow = true"
      />
      <!-- 中间浮动的盒子 -->

      <!-- 问答社区，租车指南，常见问题 -->
      <guide />
      <!-- 问答社区，租车指南，常见问题 -->

      <!-- tab切换选项卡 -->
      <toggle-tab />
      <!-- tab切换选项卡 -->

      <!-- 时间选择器弹出层 -->
      <van-popup v-model="show" position="bottom" :style="{ height: '50%' }">
        <van-datetime-picker
          v-model="currentDate"
          type="datehour"
          :title="GetOrAlso"
          :columns-order="['year', 'month', 'day', 'hour']"
          @confirm="confirmTime"
          @cancel="cancelTime"
        />
      </van-popup>
      <!-- 时间选择器弹出层 -->

      <!-- 地址选择器弹出层 -->
      <van-popup
        v-model="addressShow"
        position="bottom"
        :style="{ height: '50%' }"
      >
        <van-area
          title="选择地址"
          :area-list="areaList"
          value="440309"
          @confirm="confirmAddress"
          @cancel="cancelAddress"
        ></van-area>
      </van-popup>
      <!-- 地址选择器弹出层 -->

      <!-- 取车时申请免押 -->
      <van-popup
        v-model="noDepositShow"
        position="center"
        class="no-deposit-popup"
        :style="{ width: '92%', height: '68%' }"
      >
        <no-deposit class="no-deposit" @clickKnow="noDepositShow = false" />
      </van-popup>
      <!-- 取车时申请免押 -->
    </div>

    <!-- 回到顶部 -->
    <transition
      enter-active-class="animate__animated animate__backInUp"
      leave-active-class="animate__animated animate__backOutDown"
    >
      <back-top v-if="isBackTopShow" class="home-back-top" />
    </transition>
    <!-- 回到顶部 -->
  </div>
</template>

<script>
import Swipe from "./components/Swipe.vue";
import FloatBox from "./components/FloatBox.vue";
import Guide from "./components/Guide.vue";
import ToggleTab from "./components/ToggleTab.vue";
import NoDeposit from "../../components/NoDeposit";
import BackTop from "../../components/common/BackTop.vue";
// Vant 官方提供了一份默认的省市区数据
import { areaList } from "@vant/area-data";

export default {
  name: "Home",
  components: { Swipe, FloatBox, Guide, ToggleTab, NoDeposit, BackTop },
  data() {
    return {
      // 控制时间选择器弹出层是否显示
      show: false,
      // 控制选择地址弹出层是否显示
      addressShow: false,
      // 控制申请免押金是否显示
      noDepositShow: false,
      // 控制回到顶部组件是否显示
      isBackTopShow: false,
      // 省市区地址数据
      areaList,
      // 点击确定时的地址数据,储存在Vuex
      addressData: {},
      currentDate: new Date(),
      // 定义标题内容
      GetOrAlso: "",
      // 时间间隔 默认两天
      timeDistance: "2天",
      // 点击弹出层确认时间存储的数据
      timeData: {
        get: {
          flag: false, //用来标记点击的是取车还是还车
          timeNumber: "", // 用来储存时间，计算时间间隔
          data: {
            day: "", // 哪月哪天
            week: "", // 周几
            hour: "", // 几时
          },
        },
        also: {
          flag: false,
          timeNumber: "",
          data: {
            day: "",
            week: "",
            hour: "",
          },
        },
      },
    };
  },
  methods: {
    // 点击FloatBox的取车时间触发
    getCarTime() {
      this.GetOrAlso = "请选择取车时间";
      // 取车标记为true还车标记为false
      this.timeData.get.flag = true;
      this.timeData.also.flag = false;
      // 显示弹出层
      this.show = true;
    },

    // 点击FloatBox的还车时间触发
    AlsoCarTime() {
      this.GetOrAlso = "请选择还车时间";
      // 取车标记为false还车标记为true
      this.timeData.also.flag = true;
      this.timeData.get.flag = false;
      // 显示弹出层
      this.show = true;
    },

    // 将数据存入vuex
    saveDate() {
      let obj = { get: {}, also: {} };
      obj.get.day = this.timeData.get.data.day;
      obj.get.week = this.timeData.get.data.week;
      obj.get.hour = this.timeData.get.data.hour;
      obj.also.day = this.timeData.also.data.day;
      obj.also.week = this.timeData.also.data.week;
      obj.also.hour = this.timeData.also.data.hour;

      this.$store.commit("address/changeDate", obj);
      this.$store.commit("address/changeTimeDistance", this.timeDistance);
    },

    // 点击弹出层确定按钮
    confirmTime(time) {
      this.show = false;
      const weekList = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
      let month = time.getMonth() + 1;
      let day = time.getDate();
      let week = time.getDay();
      let hour = time.getHours();
      if (this.timeData.get.flag) {
        // 表示点击的是取车
        this.timeData.get.timeNumber = time.getTime();
        this.timeData.get.data.day =
          month.toString() + "月" + day.toString() + "日";
        this.timeData.get.data.week = weekList[week];
        this.timeData.get.data.hour = String(hour) + "时";
        // 由于可能出现取车的时间比还车的时间晚的一个BUG，所以默认吧还车的时间设置为两天后的此时
        time.setDate(day + 2);
        month = time.getMonth() + 1;
        day = time.getDate();
        week = time.getDay();
        hour = time.getHours();
        this.timeData.also.data.day = String(month) + "月" + String(day) + "日";
        this.timeData.also.data.week = weekList[week];
        this.timeData.also.data.hour = String(hour) + "时";
        // 把时间间隔设置为2天
        this.timeDistance = "2天";

        // 把数据存入vuex
        this.saveDate();
      }
      if (this.timeData.also.flag) {
        // 表示点击的是还车
        const preTime = this.timeData.get.timeNumber;
        time = time.getTime();
        this.timeData.also.timeNumber = time;
        this.timeData.also.data.day =
          month.toString() + "月" + day.toString() + "日";
        this.timeData.also.data.week = weekList[week];
        this.timeData.also.data.hour = String(hour) + "时";

        let res = new Date(time) - new Date(preTime);
        res = Math.round(res / 1000 / 60 / 60 / 24);
        this.timeDistance = res + "天";

        // 将数据存入vuex
        this.saveDate();
      }
    },

    // 点击弹出层取消按钮
    cancelTime() {
      // 关闭弹出层
      this.show = false;
    },

    // 初始化的时候就把当前时间存储,防止用户直接点击还车时间产生BUG
    initTime() {
      // 初始化的时候就把当前时间存储,防止用户直接点击还车时间产生BUG
      this.timeData.get.timeNumber = new Date()

      let time = this.timeData.get.timeNumber
      const weekList = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
      let month = time.getMonth() + 1;
      let day = time.getDate();
      let week = time.getDay();
      let hour = time.getHours();

      this.timeData.get.data.day =
        month.toString() + "月" + day.toString() + "日";
      this.timeData.get.data.week = weekList[week];
      this.timeData.get.data.hour = String(hour) + "时";
      // 由于可能出现取车的时间比还车的时间晚的一个BUG，所以默认吧还车的时间设置为两天后的此时
      time.setDate(day + 2);
      month = time.getMonth() + 1;
      day = time.getDate();
      week = time.getDay();
      hour = time.getHours();
      this.timeData.also.data.day = String(month) + "月" + String(day) + "日";
      this.timeData.also.data.week = weekList[week];
      this.timeData.also.data.hour = String(hour) + "时";
      // 把时间间隔设置为2天
      this.timeDistance = "2天";

      // 把数据存入vuex
      this.saveDate();
    },

    // 点击地址弹出层的取消触发
    cancelAddress() {
      // 关闭弹出层
      this.addressShow = false;
    },

    // 点击地址弹出层的确定触发
    confirmAddress(data) {
      // 关闭弹出层
      this.addressShow = false;
      // 储存选择的地址
      this.addressData.city = data[1].name.substring(
        0,
        data[1].name.length - 1
      );
      this.addressData.area = data[2].name;
      // 储存在vuex
      this.$store.commit("address/changeAddress", this.addressData);
      console.log(this.$store.state.address.address);
    },
    // 滚动事件处理函数，在这里判断是否显示回到顶部组件
    handleScroll() {
      let scrollTop =
        document.body.scrollTop || document.documentElement.scrollTop;
      this.isBackTopShow = scrollTop > 1000 ? true : false;
    },
  },

  created() {
    this.initTime();
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll, true);
  },
};
</script>

<style lang="scss" scoped>
.home {
  width: 100vw;
  position: relative;
  background-color: #f6f6f9;
  &-wrap {
    padding: 0 3%;
    padding-top: 290px;
    margin-bottom: 50px;
    .float-box {
      position: absolute;
      top: 108px;
      left: 3%;
    }
  }
  .no-deposit {
    width: 100%;
    height: 100%;
  }
  .home-back-top {
    position: fixed;
    bottom: 80px;
    right: 10px;
  }
}
</style>